Colores

A continuación os dejo una idea facilitada por Cesar, como podéis ver el resultado es muy bueno, basta pasar el ratón para ver las imágenes en mayor tamaño sin necesidad de clicar en ellas.
Conseguir ese efecto es muy fácil...
Nos situamos en Plantilla/ Edición de HTML y justo antes de ]]></b:skin> aplicamos el siguiente código:



.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*Estilos del borde y texto*/
position: absolute;
background-color: white;
padding: 5px;
left: -100px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}


Una vez añadido el código en la plantilla queda añadir el siguiente justo donde deseamos que salgan la imagen.
Aquí es donde podéis configurar la posición de la imagen que se amplía, el color de fondo, el tipo de texto, etc.

<a class="thumbnail" href="#thumb"><img src="aquí-la-url-de-la-imagen" width="100px" height="100px" border="0" /><span><img src="aquí-la-url-de-la-imagen"/><br />Texto si se desea poner</span></a>

Lo que está en negrita es la Url de la imagen que debéis sustituir por la vuestra.
En width y height podéis cambiar el valor del tamaño.


Anónimo

Pero es compatible con snap? es decir, en mi blog, al pasar el cursor por encima se abre una ventana...

Si instalo este device de ampliación al pasar el cursor por encima se me abrirá una o dos ventanas...?

Si he de elegir me quedo con snap, claro!

Un saludo!

Renton

Responder
JeJo

El truco es muy bueno, saludos a Cesar por tu intermedio.

Gem@, necesito otra ayuda tuya ...
Quisiera saber que es lo que tengo que hacer para que mis enlaces de la siderbar se abran en otra pantalla (así como el boton que guia a este salvador blog - jaja... )
Hay tambien una manera de que los link que se colocan en los post tambien puedan abrirse en otras ventanas ?

Esperaré tu segura respuesta. Un beso - Te gusta el Tango ? ...

Responder
sur

Holap soy nuevo en tu blog,tengo un mas o menos año y medio en esto de los blogs(empeze en el desaparecido yaycos),y en verdad este es el mejor blog de ayuda que e visto muy util y didamico......

Visitame-si tienes tiempo.........

Sique haci.....

@;---

Responder
Anónimo

Hola gema tengo una pregunta!! como quito el borde negro de la ampliacion no me gusta con borde !!
y otra cosa como hago para que me quede sentrada la foto gracia de ante mano salu2 y muy buen blog

Responder
Anónimo

hola amigaquisiera saber si me puedes ayudar a poner un agregar a tus favoritos intennte con varios codigos peroninguno sirve

mi blog www.metalminos.blogspot.com

espero tu respuesta

gracias

Responder
Anónimo

Hola Gem@ como siempre tu blog cada vez está más mounstro en serio, haces un trabajo impresionante y como prueba de mi amistad te invito a que te pases por The Refuseniks, allí encontrarás el enlace a la nueva idea de blog que estoy creando un blog en el que todos vamos a postear, allí te espero me encantaria que fueras miembro del Club de la casa del árbol, por cierto un script muy bueno creo que lo utilizaré, muchos besos

Responder
Gem@

Es compatible Renton, pero se abrirán las dos ventanas y estéticamente queda un poco feo.
Snap es mucho más práctico, a la hora de visionar imágenes, aunque yo lo he quitado del blog porque al añadir tantos enlaces en las entradas resultaba molesto, por ahora prescindo de él aunque siempre está uno a tiempo de añadirlo.
Suerte y... Ens llegim!

Hola Jejo, para que se abran los enlaces en ventana aparte hay que utilizar el atributo target="_blank" por eso cuando accesas a mi blog entras en una ventana aparte porque lo añadí al código para enlazarme ;)
Debes poner algo así:
<a href="la-url-de-la-página" target="_blank">

Suerte¡

Saludos y bienvenido Sur, escogiste una plantilla muy bonita, resulta relajante para visitante y veo que añadiste algunos accesorios de Gem@ BLOG eso me agrada.
Espero seguir viéndote por aquí :)

Anónimo para cambiar ese color del marco que rodea la imagen debes hacer un cambio en el código que aplicas a la plantilla.
Busca donde dice:
background-color: white;
Y sustituye white que es blanco por el color que deseas.
(Cuando di salida a la entrada puse el marco de color negro, pero lo he cambiado para que veas la diferencia y también lo cambié en el código)si te gusta el marco blanco sólo debes copiar el código y pegarlo sin modificar)

Hola Francisco hay varias formas de hacerlo, con texto, imagen y con un botón donde clicar, quiero postear más adelante sobre eso, pero si te urge puedes mirar algo aquí:
http://www.yomaster.com/accion1.htm

Saludos Sir, se hace lo que buenamente se puede y siempre da la sensación que es poco.
Cuenta conmigo en esa nueva iniciativa del Club de la casa del árbol.
Gracias por acordarte de mi ;)

Responder
Gem@

He olvidado contestarte JeJo no se bailar el tango, pero me gusta verlo y sentirlo :)

Responder
Anónimo

Amalia:

Es compatible Renton, pero se abrirán las dos ventanas y estéticamente queda un poco feo.
Snap es mucho más práctico


Dos ventanas?

Mejor me quedo con snap que si dejo tanta ventana abierta voy a pillar un resfriado que pa'qué!

Renton

Responder
ymmot

:) Hola de nuevo Gem@

... acabo de probar lo del zoom imagenes y perfecto.

Gracias,.. me vendra muy bien para la idea que llevo.

Salu2, tommy ;-)

Responder
Gem@

Renton ¿Amalia? quizás me he perdido algo y no se qué : )

A veces la casualidad nos viene de perlas Tommy

Responder
carmncitta

Hola Gema!! n o se si habrás hablado de esta página en tu blog, pero por si acaso no lo has hecho te dejo el link (no veo tu dirección de e-mail :S)y a lo mejor te apetece poner algo

http://sherlocco.com/create.asp

puedes personalizar el buscador con letras famosas como las de harry potter, shrek..


un besooooooooo!

Responder
Gem@

Otro beso para ti Carmncitta y gracias por el aporte que guardo para compartirlo un día de estos ;)

Responder
JeJo

Gema : Lo de target="_blank" funciona a la perfección ...
Otra vez ...

Gracias !

Responder
Anónimo

Hola Gem@ he aplicado el expandir imagen en mi nuevo blog el Club de la casa del árbol, excelente, he conseguido lo que queria pero cuando clico en la imagen va a una página que yo no le he marcado en este caso la coctelera, un beso grande y espero verte por allí.

Responder
Gem@

Estupendo Jejo, gracias por tomarte la molestia de venir a comentarlo ;)

Hola Sir: Repasa el código, quizás al tener tu imagen alojada en La coctelera te redirecciona a esa página, pero si lo hace es porque sin duda enlaza con ella, repasa que en alguna parte debe estar el enlace.
Ya estoy en la casita del árbol, espero sacar tiempo y poder escribir algo para compartirlo en La coctelera ;)

Responder
MacTrucos

Hola Gema ! se puede hacer este truco en el sidebar!
o solo en las entradas y en caso de que se pueda hacer en el sidebar, se puede quitar el marco de las fotos ,no me gusta nada .saludos X-)

Responder
MacTrucos

hola otra vez ! lo he provado y si funciona en el sidebar... sabes?? como puedo hacer el mismo efecto pero cuando paso mi cusor por unas letras salga una imagen. Por ejemplo, si escribo y paso por ensima con el raton la palabra Gema, me salga una foto ...gracias otra vez

Responder
Antonio Manfredi

Me podrias explicar donde va la segunda parte, donde va la url, posicion y demas.
No se donde tengo que ponerlo.
Gracias.

Responder
Gem@

MacTrucos el marco lo puedes modificar en el código para los CSS, puedes variar el color, quitar el pespunteado, ect...
Para conseguir el efecto de imagen al posar el ratón en un texto debo hacer una prueba, conocer no conozco la forma de hacerlo, quiero decir que no he visto ese efecto, pero voy a probar, cuando sepa algo te aviso en tu blog ;)

Admin, la segunda parte va donde tu deseas aplicar ese efecto, si es en una entrada lo aplicas en la entrada o post donde deseas que aparezca, si es en la sidebar pues lo aplicamos en Plantilla/Añadir un elemento de página/
HTML/Javascript
En el segundo códogo debes sustituir lo que está en negrita que dice aquí-la-url-de-la-imagen la posición puedes dejarla tal y como está lo que también puedes variar es el tamaño modificando el valor width y height y variar el borde de la imagen en border="0" puedes poner border="1" Lo mejor es que vayas mirando en vista previa así ves como queda y lo adaptas a tu gusto ;)

Responder
Pablinho™

Gem@ a mi no me va

Responder
Gem@

¿Aplicaste el código en la plantilla?

Responder
Markos Horro

Esta muy bien GEMAAAAAAAAAA.Siempre das los mejores trucos , gracias

Responder
Gem@

Estupendo Markos ;)

Responder
Sheccid

Hola Gema, soy de México y estoy comenzando en el mundo de los blogs (apenas 7 meses) pero he utilizado algunos de tus trucos y te felicito porque son buenísimos, es admirable el esfuerzo que pones en este blog.
Quería pedirte ayuda porque tengo un pequeño problema, copie los códigos y puse la imagen en el sidebar pero y si se amplifica pero no sale la imagen completa, solo una pequeña parte, que puedo hacer?
Gracias por tu atención :)

Responder
Gem@

Hola YO :)
La imagen no aumenta de tamaño estando en la sidebar porque el tamaño de la sidebar la limita.
Tu sidebar mide 210px; ninguna imagen podrá aumentar más de ese tamaño al igual que en el main no podrá hacerlo de 415px; :)

Responder
Anónimo

muy pero que muy bueno !!,
ánimo, este pais va para adelante.

Saludos
Jesus

Responder
Gem@

Hola Jesús me alegra ver que aún te acuerdas de este blog.
Lo sé,lo sé lo sé... en todo llevas razón menos en que va bien el país a no ser que te refieras a otro.

¿Saludos? y un abrazo.

Responder
Goethemola

Buenas!

Ante todo, gracias por el aporte. Ya lo he instalado en mi blog y funciona a la perfección.

Tan sólo quería preguntarte si por casualidad hay algún modo de que las imágenes ambliadas queden dentro de marco.

A ver si me explico... Si visitas mi blog, verás que he instalado el código para la línea horizontal de imágenes de la parte superior, y así como las 7-8 primeras se ven de coña, las últimas (las de más a la derecha) quedan cortadas. ¿Hay alguna manera de que las imágenes ampliadas de la derecha salgan más centradas hacia la izquierda?

Espero que se entienda lo que prentendo decir. Si no, en cuanto lo veas en el blog sabrás a qué me refiero.

Un saludete!

Responder
Anónimo

hola soy luis y me gustaria usar esta aplicacion dentro de mi myspace.
mi pregunta es:
¿Es posibles utilizarlo?,y si no fuera posible si me pudireran indicar como hacerlo,se lo agradeceria,gracias por todo.
un abrazio grande.

Responder
Gem@

Goethemola siento ver tu comentario con tanto retraso. He visto tu blog y la única forma de poder visualizar las imágenes completas sería utilizar una ventana modal. Con este mismo código sería dificil ya que si modificamos los CSS para centrar la ampliación de imagen tendríamos el mismo problema en el otro extremo.

Hola Poyo, siento no poder ayudarte nunca he usado myspace.
De todas formas debe haber algún blog o foro de ayuda donde poder orientarte quizás en Google encuentres algo.
Mira aquí por si encuentras algo ;)

Responder
EmiTer

Hola Gema, la duda que tengo es si se podría hacer lo siguiente, al pasar encima de una palabra de un texto apareciera una imagen.

Espero tu respuresta

Responder
Gem@

Claro que si EmiTer, se añade el script a la plantilla y donde seas que aparezca la imagen añades:
<a class="thumbnail">texto<span><img src="url-imagen" /></a>

Responder
EmiTer

He puesto el código que me diste en la plantilla sin problemas, pero a la hora de poner el código dentro de la entrada tras ponerlo dentro de un texto seleccionando una palabra en concreto, el texto que queda por detras de esa palabra desaparece y se mete dentro de la imagen que se abre al pasar por encima de esa palabra.

Responder
Gem@

No entiendo muy bien eso que dices, es decir lo entiendo pero no sé porqué se mete el texto dentro de la imagen.
Lo lógico y puede pasar es que si el texto total de la entrada es muy pequeño la imagen quedaría cortada porque no tiene espacio para mostrase completa.
Mira este ejemplo que hice aquí

Responder
EmiTer

Hola Gema, gracias por el ejemplo, lo que me pasa a mi, es lo que tienes en el ejemplo, en la segunda foto se mete el texto dentro de la imagen y se queda una columna infinita estrecha hasta que se acaba el texto

Responder
Gem@

Ahora entiendo, es que tu usas Explorer y yo Firefox, y con Firefox no pasa eso, intentaré ver como solucionarlo ;)

¿Viste el tema de ventana modal?
Ibox

También puedes ampliar imágenes de estaesta forma.

Con esta última no es necesario añadir archivos externos.

Responder
Anónimo

hola gema he copiado el codigo para ampliar la imagen pero al pasar el cursor se amplia muy grande toda la pantalla para ser especifico en que parte del codigo se gradua la ampliacion

Responder
Gem@

Anónimo la imagen ampliada se muestra en su tamaño real, para que se mostrara de menor tamaño debes reducirla con un editor.
En http://www.imageshack.us/ también puedes subir la imagen y escoger el tamaño :)

Responder
Anónimo

Hola y gracias por tus aportaciones.

¿Cómo se modifica el estilo del texto, cómo se puede centrar?

Un saludo

Responder
Anónimo

Y otra cosa, ¿alguien sabría como hacer popup con un video?

Gracias.

Responder
Gem@

Anónimo el texto no tiene estilo, esos colores se los añadí con el editor de entradas.
Pero puedes darle estilos a tu texto situándote en "Redactar" y utilizando los iconos para ese menester ;)
Sobre crear un popup con vídeo mejor mira en Vagabundia

Responder
Anónimo

Hola Gema.
Ante todo gracias por hacer un sitio así. He usado el código para aumentar las imágenes al pasar el ratón y funciona a la perfección y es lo que estaba buscando para mi web, a excepción de un par de detalles que espero me ayudes a resolver; te comento: por un lado, en el marco azul de 2 px de grosor que envuelve a la imagen que aumenta al pasar el ratón, esto lo he hecho yo, sale una rayita como un guión, y por otro, con las imágenes que he probado a hacerlo, 2, ambas se amplían en la misma esquina superior izquierda y en realidad, lo que me gustaría es que se amplíen cerca de donde está la imagen original. Bueno, como no se si me explico lo suficientemente bien te paso el enlace por si lo puedes mirar cuando tengas un rato.
Muchas gracias otra vez.
www.telefonica.net/web2/olasdevizcaya/picos/picos.html

Responder
Gem@

No entiendo porque yo probé con varias imágenes y no las muestra siempre en el mismo sitio sino junto a la imagen que pasamos el cursor.
¿Has probado con el mismo valor de padding que pongo en el ejemplo?

Responder
NeNe_WeNo

Muy buenas.

¿Y se podría hacer algo similar, pero con una serie de imágenes, ampliándose todas ellas en un lugar concreto? Me explicaré mejor sin palabras.

Saludos, Gem@.

Responder
Gem@

yz Hola NeNe_WeNo, me temo que no porque la posición de mostrar la imagen ampliada se añade en los estilos CSS, cuando esto ocurre la ampliación se muestra siempre en el mismo sitio para todas las imágenes.
La ampliación se va "moviendo" conforme marcamos una imagen nunca queda en el mismo sitio :(

Responder
MOZAMO ILUSTRACIÓN

Hola Gema, quiero usar este método psra las fotos de las entradas, he puesto el código después de head pero al principio de la página. Hay otro head más abajo y no sé.....luego no sé exactamente donde tengo que colocar los dema´s códigos si me pudiras ayudar.....Gracias. Ya tengo activado mi perfil pero por si acaso.....
http://ilustrarart.blogspot.com

Responder
Gem@

yz Ilustrarart sólo hay un <head> y está al principio de laa plantilla la otra etiqueta que verás es </head> debes añadirlo después de <head>
El otro código va donde deseas añadir la imagen es decir donde editamos el post :)

Responder
Anónimo

TIENE PROBLEMAS CON EL NAVEGADOR OPERA... CUANDO MUEVES LA BARRA DESLIZANTEU UN POCO LA POSICION E LA IMAGEN SE VUELVE LOCA... SE POSICIONA EN CUALQUIER LUGAR MENOS DONDE PROGRAMASTE QUE SE POSICIONARA

Responder
Gem@

yz Gracias por comentarlo Anónimo, si es debido al navegador me temo no poder hacer nada :(

Responder
Old School Generation

Hola Gema, es excelente la labor que has realizado con tu página, me quito el sombrero. Aprovecho la ocasión para formularte una pequeña pregunta; me interesa especialmente el efecto de agrandar las imágenes al posar el cursor sobre ellas, pero por lo que tengo entendido es necesario aplicar la dirección url de cada imagen para que ese efecto sea posible, lo que en un blog con multitud de imágenes, resulta una tarea tediosa. Mi pregunta es la siguiente, existe algún método que permita algun efecto similar sin necesidad de añadir la dirección de cada imagen de forma individual, es decir, que se aplique al total de las imágenes del blog? Muchas gracias por tu atención de antemano. Un saludo

Responder
Gem@

yz Saludos Old School Generation, hasta donde yo sé con este tipo de script o cualquier otro siempre será necesario añadir la url de la imagen ampliada o de mayor tamaño de lo contrario sería imposible mostrarla :O

Responder
Old School Generation

Muchísimas gracias por tu tiempo. Creo entonces que me centraré en potenciar otros aspectos visuales, porque con un blog como el mío, que incluye una gran cantidad de material gráfico, sería bastante pesado conseguir dicho efecto para cada una de las fotografías que incluye cada post. Dicho esto, solo me resta felicitarte por el enorme esfuerzo que sin duda le has dedicado a esta página, que se traduce en unos niveles de calidad muy elevados. De momento no he aplicado mucho de lo que he leido aquí, aunque son tantas cosas las que comentas, y tan buenas todas, que has conseguido impresionarme. Sin duda, una referencia obligatoria para todos los bloggeros. Un saludo y gracias de nuevo.

Responder
Gem@

yz Old School Generation gracias a ti por el comentario tan agradable :)

Responder
Anónimo

Genial Muchas Gracias

Responder
Gem@

yz Gracias por comentar anónimo :)

Responder
photoviajeros

Hola gema, he aplicado este efecto pero la imágen que pongo tiene un tamaño original de 800x600, y el wrapper de mis entradas solo tiene 650px, por lo que al pasar el cursor por encima y ampliarse la imagen se me corta por ambos lados.
¿Hay alguna forma de que se vea la imagen completa quedando por encima del wrapper de las entradas y el de la sidebar?

He visto que has contestado unos comentarios atras que solo se puede ver la imagen completa con una ventana modal, pero al ver en http://ciudadblogger.com/2009/06/agrandar-imagen-al-pasar-el-mouse.html dónde explica el mismo método que el tuyo, y le aparece la imagen del ejemplo por encima de la sidebar.
En caso de ser imposible, te agradeceria que me aconsejases la ventana modal mas liviana posible y que pudiese meter el código jscript en la misma plantilla.
Saludos y gracias

Responder
Gem@

:: PhotoViajeros, la imagen se ver cortada por eso que comentas, cualquier forma de añadir una imagen directamente en el post debe ser siempre menor al tamaño de main. De lo contrario sería como forzar la imagen y el resultado sería ese mismo o que desplazaría la sidebar abajo.
Yo soy una entusiasta de las ventanas modales pienso, que es una forma muy atractiva de mostrar las imágenes y al mismo tiempo podemos mostrar la imagen en el tamaño deseado independientemente de las medidas de main.
Una de las más livianas es Lytebox yo la estoy usando en este blog aunque un poquito modificada por mi de acuerdo a mis gustos.
Puedes ver la entrada sobre esa ventana en el siguiente %%
enlace

Y la demo para que veas el efecto está en %%
este blog de pruebas.

Esa ventana no admite vídeos, no está creada para eso. Cualquier duda ya me dices algo :)

Responder
PhotoViajeros

Muchas gracias Gema, he implementado Lytebox en mi blog junto con otros cuantos trucos mas de los que tienes explicados por aqui y la verdad es que le he pegado un lavado de cara que casi no lo reconozco ni yo mismo, jeje.
Enhorabuena por la cantidad de material que tienes en el blog y lo bien explicado de una manera tan sencilla que podemos aplicar cada uno de los trucos en unos pocos minutos.

Saludos y muchas gracias!!

Responder
Gem@

:: PhotoViajeros la verdad que es un cambio radical, ha quedado estupendo. Sin embargo no veo el efecto de Lytebox en las imágenes :O

Responder
photoviajeros

Hola Gema, el efecto de lytebox no aparecía porque de momento solo lo estaba usando en el blog de pruebas junto con el resto de cambios. Desde hoy ya he implementado todos los nuevos cambios (incluido lytebox) en el blog de verdad, aunque me he dado cuenta que si no ha terminado de cargar la página y pulsas sobre la imagen, no se aplica lytebox. ¿hay alguna forma de hacer que lo primero que cargue la página sea el script embebido de lytebox?

Un saludo y gracias de nuevo

Responder
Gem@

:: Ninguna ventana modal ni efecto puede verse si la página no ha cargado completamente, es ocurre porque hasta que la página no carga el script no se ejecuta. De todas formas estuve mirando el blog y las imágenes son grandiosas, algunas de 1500px × 1125px para lo que es necesario utilizar el cursor y verlas con detalle pero se hace imposible visualizar la imagen completa por ese motivo. Lo ideal es que la imagen nunca sea mayor a la pantalla porque la gracia del efecto pasa desapercibido.

Responder
Unknown

hola gem@, aquí encontré lo de la ampliación (y en otra de tus entradas), pero me resulta algo engorroso hacerlo para todas las imágenes... así que supongo que lo dejo...

Responder
Gem@

:: Pues aquí mismo te había enviado en el otro comentario :D

Responder
Unknown

sí, algo parecido. pero me va a resultar engorroso...

Responder
Gem@

:: Si hay que hacerlo en muchas entradas anteriores si :S

Responder
Unknown

pues. sí... pero ya intenté algo y no me convence. zenkiu gem@.

Responder
Unknown

Muchísimas gracias Gema, me ha quedado impresionante con tu ayuda!!!!!!!!

Un saludo, alvaro_heavy.

Responder
Gem@

:: Estupendo Alvaro :)

Responder
Mango Viche's Clothes Store

Gema, y si la intencion mia es que al dar click en la imagen, esta se agrande, al igual que usar el hover.
:D

Responder
Gem@

:: Mango Viche's Clothes Store haciendo click sobre imagen puedes agrandarla si añadimos una ventana modal como en este ejemplo:
http://gemablog-.blogspot.com/2009/05/lytebox-otra-forma.html

Responder
Naibun09

Hola Gem@, he probado tu código en una serie de fotos unidas y en iexplorer quedan las siguientes a la que amplio por encima de la ampliada (con Firefox sale bién). Sabrías alguna manera de controlar eso.
Gracias de antemano y enhorabuena por este blog.
Un saludo.

Responder
Gem@

:: Naibun09 este script no está creado para grupo de imágenes, prueba de esta otra forma que no requiere script a ver si te gusta:
http://gemablog-.blogspot.com/2010/09/galeria-con-css-efecto-hover.html

Responder
Naibun09

Gracias Gem@, lo he probado con Opera y se consigue un efecto bastante bueno, lástima que la mayoría de navegantes sigan utilizando IE.
Un saludo y gracias otra vez.

Responder
Gem@

:: Si que es una lástima, sin embargo según mis estadísticas son minoría las visitas que utilizan IE :D

Responder
Unknown

http://draft.blogger.com/home?pli=1

como hago para que la foto se vea con el borde gris a la derecha y detras de la foto primera, como en su ejemplo, ya que la del codigo es diferente, es muy bueno este efecto gracias.

Responder
Gem@

:: Grapu en el ejemplo no tengo aplicados estilos de borde, los que ves son de los que se añaden en las imágenes del post (en .post img )

Responder
Josep Mª Planas

Hola Gem@: He probado esto en mi blog y si lo abro desde Mozilla me funciona perfecto, pero para internet explorer, las imagenes me salen por debajo de los elementos del blog. Te dejo el enlace de la entrada donde lo he hecho para que lo puedasver tu misma.
Muchas gracias de antemano y aunque no habia escrito nunca, soy un seguidor de tu blog.
Web: http://jm-planas.blogspot.com/2010/12/casa-triangular.html

Responder
Julio Sánchez

Hola,

he aplicado el efecto a mi web pero el problema es que yo lo hago a una imagen que está dentro de la celda de una tabla. Al agrandarse la imagen también se agranda la celda de la tabla, con lo que todo queda descolocado.

¿Habría alguna forma de hacer lo mismo pero que la imagen agrandada estuviera al lado de la imagen pequeña pero por encima de la tabla para que no se descoloque la tabla?.

Muchas gracias,
Julio Sánchez

Responder
ofo1965

Hola Gema de nuevo. Me sale demasiado grande la imagen ampliada. De que código tengo que modificarla.

Gracias guapa.

Responder
Gem@

:: Hola ofo1965 la imagen ampliada se muestra en el tamaño real de la imagen, puedes retocarla con algún editor antes de subirla o establecer las medidas igual que con la miniatura:
<img src="aquí-la-url-de-la-imagen" width="100px" height="100px" />

Responder
ofo1965

sobre el marco, lo he intentado, pero no se que cambiar del código:


.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*Estilos del borde y texto*/
position: absolute;
background-color: white;
padding: 5px;
left: -100px;
border: 1px dashed grey;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}
Gracias de nuevo.

Responder
Gem@

:: Eso que me muestras son los estilos que se añaden a la plantilla y ya no tenemos que tocarlos más.
Lo que se cambia está en el sitio donde añadimos la imagen, es decir justo donde vamos a mostrarla si es en una entrada pues añadimos el código a una entrada.
Verás que hay que añadir dos veces la imagen, la primera es el thumbnail (la miniatura) y la segunda es la imagen tal y como se mostrará al pasar el cursor.

Supongamos que yo quiero mostrar una miniatura de 125x125 y al pasar el cursor que la imagen se muestre de 300x 200 independientemente del tamaño que tenga.

<a class="thumbnail" href="#thumb"><img src="aquí-la-url-de-la-imagen-pequeña" width="125px" height="125px" border="0" /><span><img src="aquí-la-url-de-la-imagen-grande" width="300px" height="200px"/><br />Texto si se desea poner</span></a>

Responder
ofo1965

Perdona Gema, me refería a cambiar el color del marco (negro) a blanco. No se en que pensaba. De ahí ponerte el código html.

Responder
Gem@

:: Me confundí yo Ofo :s
El marco se modifica en /*Estilos del borde y texto*/ pero que raro que digas es negro si está definido como blanco background-color: white;

Creo que lo has cambiado por gris oscuro mira en :
.thumbnail span{ /*Estilos del borde y texto*/
position: absolute;
background-color: grey;
padding: 5px;
left: -100px;
border: 1px dashed grey;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}

el borde también lo tienes en el mismo color.

Responder
ofo1965

Hola de nuevo. Llega la contra réplica jejej. Mira el código.
Ahora tengo los 2 bordes en white. Puedo haber metido otro código que impida ver el resultado.

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*Estilos del borde y texto*/
position: absolute;
background-color: white;
padding: 5px;
left: -100px;
border: 1px dashed white;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}


]]>

Gracias de nuevo.

Responder
Gem@

:: Ofo tienes añadidos los estilos dos veces una donde los estás cambiando y otra fuera de la hoja de estilos más abajo, los tienes con la etiqueta style. Buscalos y elimina ese código porque no te dejará personalizar la otra parte si sigue ahí.

<style type='text/css'> .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /* Estilos para la imagen agrandada */ position: absolute; background-color: black; padding: 5px; left: -100px; border: 5px double gray; visibility: hidden; color: #ffffff; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; } .thumbnail:hover span{ visibility: visible; top: 0; left: 10px; } </style>

Responder
jotaVe

pruebo... :)

Responder
Urzay
Este comentario ha sido eliminado por el autor.
Responder
mona dos

como hago para que al pasar el cursor por la imagen no me corra las otras miniaturas? si alguien sabe ayuda porfavor!
trabajo con html y css .

Responder
Gem@

:: Tendría que ver tu ejemplo online mona dos :S

Responder
Oscar Giménez

Hola Gemma, me gustaría saber si se puede hacer que la imagen ampliada siempre se represente en el mismo sitio de la pantalla, centrada vertical y horizontal. Gracias de antemano, un saludo!

Responder
Unknown

Hola. No me funciona el border="1"
en el codigo:
a class="thumbnail" href="#thumb">img src="aquí-la-url-de-la-imagen" width="100px" height="100px" border="0" />span>img src="aquí-la-url-de-la-imagen"/>
Texto si se desea poner/span>

cuando le cambio para tener un borde al thumbnail, me aparece sin borde, he tratado de ponerle borde pero no puedo. A la imagen agrandada si puedo ponerle un borde, pero a la pequeña no puedo. Podrías ayudarme?? Gracias

Responder
Gem@

:: La imagen pequeña adquiere los estilos de borde que tenemos definidos en las imágenes de las entradas, pero podemos añadirle un borde de esta forma:
<img class="border="1" src="ur-miniatura" style="width: 141px; height: 141px;">

Responder
Nancy Ramirez

Hola,
disculpe de que manera agrego mas de una imagen :) Muchas Gracias!

Saludos Coridales

Responder
Nancy Ramirez

Hola,
disculpe de que manera agrego mas de una imagen :) Muchas Gracias!

Saludos Coridales

Responder
Nancy Ramirez

Hola,
disculpe de que manera agrego mas de una imagen :) Muchas Gracias!

Saludos Coridales

Responder
Gem@

:: Se añade el código tantas veces como imágenes deseamos mostrar con este efecto.
Los estilos no, son el primer código y se añaden una sola vez.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top